<template>
    <van-tab title="电影">
        <aside>
            <ul class="type-list">
                <li v-for="type in filmTypes"
                    :class="{active: type.id === nowAroundType}"
                    @click="changeAroundType(type)"
                    :key="type.id">
                    <span>{{type.name}}</span>
                </li>
            </ul>
        </aside>
        <article @scroll="aroundScrollEvt">
            <van-card v-for="(item, i) in filmList" :key="item.id + '-' + i"
                @click="jpEvt(item.id)"
                :title="item.name"
                :desc="`主演：${item.star}`"
                :thumb="myBaseUrl + item.img"
                >
                <template #tags>
                    <van-tag v-for="it in item.ver" :key="it" plain type="danger">{{it}}</van-tag>
                </template>
                <template #price>
                    <span class="price">
                        <strong>{{item.wish}}人想看</strong>
                    </span>
                </template>
            </van-card>
        </article>
    </van-tab>
</template>

<script>
import { movieApi, movieListApi, getDetailListApi } from '../../apis/typeApi'
 export default {
        data() {
            return {
                myBaseUrl: 'http://localhost:15666/',
                filmTypes: [],
                filmList: [],
                nowAroundType: '',
                aroundPage: 1,
                aroundLoading: true,
                aroundHasMore: true
            }
        },
        created() {
            this.getAroundTypes()
        },
        methods: {
            async getAroundTypes() {
                let result = await movieApi()
                let arr = (result?.data || []).map(it => {
                    return {
                        id: it,
                        name: it
                    }
                })
                arr.unshift({id: '', name: '全部'})
                this.filmTypes = arr

                this.getAroundList()
            },
            async getAroundList() {
                let result = await movieListApi({page: this.aroundPage, size: 10, cat: this.nowAroundType, name: ''})
                if (result.code === 200) {
                    let _arr = result.data.rows.map(it => {
                        it.tags = Array.from(new Set((it.ipRightName || '').split(',')))
                        return it
                    })
                    this.filmList = this.aroundPage === 1 ? _arr : this.aroundList.concat(_arr)

                    this.aroundHasMore = this.aroundPage * 10 < result.data.total
                    console.log(this.filmList)
                }
                
                setTimeout(() => {
                    this.aroundLoading = false
                })
            },
           
            changeAroundType(type) {
                this.aroundLoading = true
                this.nowAroundType = type.id
                this.aroundPage = 1
                this.filmList = []
                this.getAroundList()
            },
            aroundScrollEvt(evt) {
               
                let isBot = (evt.target.scrollTop + evt.target.clientHeight) - evt.target.scrollHeight > -100
                if (!this.aroundLoading && this.aroundHasMore && isBot) {
                    
                    this.aroundLoading = true
                    this.aroundPage += 1

                    this.getAroundList()
                }
            },
            async jpEvt(id) {
                let res = await getDetailListApi(id);
                let myData = sessionStorage.getItem("myData");
                if (!myData) {
                    sessionStorage.setItem("myData", JSON.stringify(res));
                    this.$router.push("/details");
                    return;
                }
                sessionStorage.removeItem("myData");
                sessionStorage.setItem("myData", JSON.stringify(res));
                this.$router.push("/details");
            },

        }
  
}
</script>

<style lang="less" scoped>
    .van-tab__pane {
        display: flex;
        height: 100%;
        > aside,
        > article {
            flex: 1;
            width: 0;
            height: 100%;
            background: #fff;
            overflow-x: hidden;
        }
        > aside {
            flex: 0 0 110px;
            background: #f6f7fb;
        }
    }
    
    .type-list {
        display: block;
        height: 100%;
        overflow-x: hidden;
        li {
            display: block;
            position: relative;
            height: 42px;
            line-height: 42px;
            font-size: .8rem;
            color: #70798a;
            padding-left: 10px;
            white-space: nowrap;
            background: transparent;
            &.active {
                color: #e60014;
                background: #fff;
                font-weight: bold;
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 10px;
                    left: 4px;
                    width: 14px;
                    height: 14px;
                    background: #d6f5ed;
                    border-radius: 50%;
                    z-index: 0;
                }
                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    width: 16px;
                    height: 16px;
                    margin-top: -8px;
                    background: url(../../images/right.png) center center / 100% 100% no-repeat;
                    z-index: 6;
                }
            }
            span {
                position: relative;
                z-index: 3;
            }
        }
    }

    .van-card {
        margin: 0 8px;
        padding: 12px 8px;
        border-bottom: solid 1px #ddd;
        background-color: #fff;
        .van-card__title {
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: .75rem;
        }
        .van-card__thumb {
            height: 106px;
        }
        .price {
            display: block;
            line-height: 20px;
            span {
                font-size: .65rem;
                font-weight: 400;
                color: #d4380d;
                em {
                    font-size: .9rem;
                    font-weight: 600;
                    font-style: normal;
                }
            }
            strong {
                margin-left: 4px;
                font-size: .6rem;
                color: #999;
                font-weight: 400;
            }
        }
    }

    .more-text {
        display: block;
        position: relative;
        text-align: center;
        font-size: .7rem;
        color: #bec7d9;
        line-height: 32px;
    }
</style>